<template>
  <div class="main">
    <header>
      <div class="register-aliyun-topbar">
        <div class="aliyun-topbar-header">
          <div class="aliyun-topbar-element aliyun-logo">
            <a class="aliyun-logo-link">
              <img src="../../assets/logo.png" class="aliyun-logo-image" />
            </a>
            <span class="topbar-text">Register</span>
          </div>
        </div>
      </div>
    </header>
    <div class="ace-dpl-account">
      <div class="content">
        <a-form class="Loginform" :label-col="labelCol" :wrapper-col="wrapperCol">
          <div class="flex">
            <div class="head">Welcome to register for the Engineering Service Request Platform</div>
            <div class="tips">
              <span class="tips-text">An existing account?</span>
              <router-link class="tips-link" :to="{name:'Login'}">Quick login &gt;</router-link>
            </div>
          </div>

          <a-form-item label="NTID">
            <a-input size="large" type="text" placeholder v-model.trim="NTID" allowClear></a-input>
          </a-form-item>
          <a-form-item label="UserName">
            <a-input size="large" type="text" placeholder v-model.trim="userName" allowClear></a-input>
          </a-form-item>
          <a-form-item label="passWord">
            <a-input-password size="large" type="text" placeholder v-model.trim="passWord" allowClear></a-input-password>
          </a-form-item>
          <a-form-item label="Department">
            <a-select @change="DepartmentChange" :default-value="defaultDeptName" allowClear>
              <a-select-option
                v-for="(item, index) in DepartmentInfo"
                :key="index"
                :value="item.DeptId"
              >{{ item.DeptName }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="Role">
            <a-select default-value="common" @change="RoleChange" allowClear>
              <a-select-option
                v-for="(item, index) in RoleInfo"
                :key="index"
                :value="item"
              >{{ item }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label>
            <a-checkbox class="ml55" @change="checkIsSME">Is SME</a-checkbox>
          </a-form-item>
        </a-form>

        <div class="fm-btn">
          <button
            type="submit"
            tabindex="3"
            class="fm-button fm-submit password-login"
            @click="submit"
          >Register</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data() {
    return {
      labelCol: {
        xs: { span: 3 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 10 },
        sm: { span: 19 }
      },
      isLoginError: false,
      SectorInfo: [],
      WorkcellNameInfo: [],
      Sector: '',
      workcellName: '',
      DivsionInfo: [],
      Division: '',
      userName: '',
      NTID: '',
      Role: 'common',
      isSME: false,
      RoleInfo: ['common'],
      passWord: '',
      defaultDeptName: '',
      DepartmentInfo: [],
      DeptId: '',
      defaultRoleName: ''
    }
  },
  created() {
    document.onkeydown = e => {
      if (e.keyCode == 13) {
        this.submit()
      }
    }
  },
  beforeDestroy() {
    document.onkeydown = ''
  },
  mounted() {
    this.getSelectInfo()
    this.getDepartmentInfo()
  },
  methods: {
    getDepartmentInfo() {
      let data = {}
      const a = {
        method: 'SysDept_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: this.currentPage,
        queMode: 'OR',
        limit: this.pageSize,
        datas: data
      }
      this.$post(a).then(result => {
        this.DepartmentInfo = result.data.length > 0 ? result.data : []
        this.DepartmentInfo.map(item => {
          item.CreateTime = item.CreateTime.replace('T', ' ').split('.')[0]
          return item
        })
      })
    },
    DepartmentChange(value, e) {
      this.DeptId = value
    },
    sectorChange(value, e) {
      const key = Number(e.key)
      const info = this.SectorInfo[key].workcellName
      this.WorkcellNameInfo = []
      this.WorkcellNameInfo = info
      this.Sector = value
    },
    submit() {
      if (!this.NTID) {
        this.$message.warn('Please enter the NTID')
        return
      } else if (!this.userName) {
        this.$message.warn('Please enter the user name')
        return
      } else if (!this.passWord) {
        this.$message.warn('Please enter the passWord')
        return
      } else if (!this.DeptId) {
        this.$message.warn('Please select the Department')
        return
      }
      const a = {
        method: 'SysUser_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          NTID: this.NTID,
          passWord: this.passWord,
          UserName: this.userName,
          Role: 'common',
          DeptId: this.DeptId,
          IsSME: this.isSME ? 1 : 0
        }
      }
      this.$post(a).then(result => {
        console.log('result :>> ', result)
        if (result.code === 0) {
          this.$message.success(
            'Registered successfully!About to jump to the login page!'
          )
          this.$router.push({ name: 'Login' })
        }
      })
    },
    RoleChange(value, e) {
      this.Role = value
    },
    WorkcellChange(value, e) {
      this.workcellName = value
      const key = Number(e.key)
      this.DivsionInfo = []
      this.DivsionInfo = this.WorkcellNameInfo[key].customer
    },
    DivisionChange(value, e) {
      this.Division = value
    },
    getSelectInfo() {
      // 获取select数据
      const p = {
        method: 'tb2_workcell_customer_Que',
        userId: window.userId || 1,
        sign: 'A0251DD654CBB418AF1422CA880A1270',
        currentPage: 0,
        limit: 0,
        language: window.language || 1,
        fieldList: '',
        datas: {
          sector: 'Automotive'
        }
      }

      this.$post(p).then(result => {
        // console.log('result.data :>> ', result.data)
        this.SectorInfo = []
        result.data.forEach(element => {
          const a = {
            sector: 'N/A',
            workcellName: [
              {
                workcellName: 'N/A',
                customer: [
                  {
                    customer: 'N/A'
                  }
                ]
              }
            ]
          }
          this.SectorInfo[0] = a
          this.SectorInfo.push(element)
        })
      })
    },
    checkIsSME(e) {
      this.isSME = e.target.checked
      console.log('e :>> ', this.isSME)
    }
  }
}
</script>
<style lang="less" scoped>
@import url('css/register.less');
</style>
